<template>
	<view class="detail" v-if='data'>
		<view class="name"> {{data.sjyhj.yhjmc}}</view>
		<image class="img" :src="data.sjyhj.url"></image>
		<view class="date">有效期:{{data.sjyhj.kssj.slice(0,10)}}至{{data.sjyhj.jssj.slice(0,10)}}</view>
		<view class="dec">剩余未发放:{{data.sjyhj.num - data.sjyhj.synum}}</view>
		<button class="acquire_score" @click="delyhq">删除</button>
		<view class="dec">使用说明:</view>
			<u-line></u-line>
		<view class="dec">{{data.sjyhj.yhjjs}}</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				sjid: '',
				data: null
			}
		},
		onLoad(options) {
			this.id = options.id
			this.sjid = options.sjid
			console.log(this.id)
			this.getById();
		},
		methods: {
			delyhq(){
				this.$http.post('/app/pay/delYhj', {
					id: this.id
				}).then(res => {
					uni.$u.toast('删除成功!')
					uni.navigateBack({
					    delta: 2
					});
				})
			},
			getById() {
				this.$http.post('/app/pay/getSjYhjXq', {
					id: this.id
				}).then(res => {
					console.log(res)
					this.data = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.acquire_score {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		height: 60rpx;
		color: #333;
		font-family: PingFangSC;
		color: #ffffff;
		font-weight: 500;
		font-size: 26rpx;
		padding: 0;
		border-radius: 50px;
		background: linear-gradient(90deg, #13b1a2 0%, #276329 100%);
		border: none;
		margin-top: 30rpx;
	}
	.detail {
		display: flex;
		flex-direction: column;
		align-items: center;

		.name {
			font-weight: bold;
			color: #000;
			font-size: 34rpx;
		}

		.img {
			margin: 30rpx;
			width: 300rpx;
			height: 300rpx;
		}

		.dec {}

		.date {
			margin: 30rpx;
		}
	}
</style>